<template>
  <div class="doctor">
    <el-container>
      <el-header
        >选择科室
        <el-select v-model="typevalue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.dept"
            :label="item.dept"
            :value="item.dept"
          >
          </el-option>
        </el-select>
      </el-header>
      <el-main v-loading="loading">
        <el-dialog
          :title="dialogDoctor.name + '医师的评分'"
          :visible.sync="dialogFormVisible"
          width="90%"
        >
          <img
            :src="
              dialogDoctor.pic ||
              'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
            "
            class="image"
            style="width: 60%; margin: 0 auto; margin-bottom: 15px"
          />
          <el-rate v-model="dialogDoctor_mark"></el-rate>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitScore">确 定</el-button>
          </div>
        </el-dialog>
        <el-row>
          <el-col
            :span="12"
            v-for="(o, index) in doctors"
            :key="o"
            :offset="index > 0 ? 2 : 0"
          >
            <el-card :body-style="{ padding: '0px' }">
              <img
                :src="
                  o.pic ||
                  'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
                "
                class="image"
                @click="dialogOpen(doctors[index])"
              />
              <div style="padding: 14px 14px 0 14px" @click="dialogOpen(doctors[index])">
                <span>{{ o.name }}医师 {{ o.dept }}</span>
                <div class="bottom-mark clearfix">
                  <el-rate
                    v-model="o.mark_average"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                  <span>{{ o.mark_num }}人评价</span>
                </div>
                
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Doctor",
  inject: ["reload"],
  data() {
    return {
      dialogFormVisible: false,
      dialogDoctor: {},
      dialogDoctor_mark: 5,
      options: ["选项1", "黄金糕", "双皮奶", "龙须面"],
      typevalue: "",
      loading: true,
      doctors: [
        // {
        //   id: "001",
        //   name: "王无",
        //   dept: "外科",
        //   mark_average: 3.7,
        //   mark_num: 500,
        // },
        // {
        //   id: "001",
        //   name: "王达",
        //   dept: "外科",
        //   mark_average: 3.2,
        //   mark_num: 500,
        // },
        // {
        //   name: "王反",
        //   id: "001",
        //   dept: "外科",
        //   mark_average: 3.9,
        //   mark_num: 500,
        // },
      ],
    };
  },
  computed: {},
  watch: {
    typevalue: function (val) {
      console.log(val);
      this.loading = true;
      this.getDoc(val);
    },
  },
  methods: {
    submitScore() {
      this.dialogFormVisible = false;
      this.loading = true;
      this.$axios({
        method: "post", //指定请求方式
        url: this.HOME + "/editdocscore",
        data: {
          token: localStorage.getItem("token"),
          id: this.dialogDoctor.id,
          score: this.dialogDoctor_mark,
        }, //请求接口（相对接口，后面会介绍到）
        //欢迎加入全栈开发交流圈一起学习交流：864305860
      }) //面向1-3年前端人员
        .then((res) => {
          console.log(res);
          if (res.data.msg == "成功") {
            this.getDoc(this.typevalue);
          }
        });
    },
    getDoc(val) {
      this.$axios({
        method: "post", //指定请求方式
        url: this.HOME + "/getdocbytype",
        data: {
          token: localStorage.getItem("token"),
          type: val,
        }, //请求接口（相对接口，后面会介绍到）
        //欢迎加入全栈开发交流圈一起学习交流：864305860
      }) //面向1-3年前端人员
        .then((res) => {
          console.log(res);
          if (res.data.msg == "成功") {
            this.doctors = res.data.rs;
            this.loading = false;
          }
        });
    },
    dialogOpen(doctor) {
      //console.log(1111);
      this.dialogFormVisible = true;
      this.dialogDoctor = doctor;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
  created: function () {
    this.getDoc("");
    this.$axios({
      method: "post", //指定请求方式
      url: this.HOME + "/gettype",
      data: {
        token: localStorage.getItem("token"),
      }, //请求接口（相对接口，后面会介绍到）
      //欢迎加入全栈开发交流圈一起学习交流：864305860
    }) //面向1-3年前端人员
      .then((res) => {
        console.log(res);
        if (res.data.msg == "成功") {
          this.options = ["", ...res.data.rs];
        }
      });
  },
  mounted: function () {},
};
</script>
<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom-mark {
  margin-top: 5px;
  margin-bottom: 6px;
  line-height: 50px;
  width: fit-content;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
<style>
.tag_tanchuang {
  position: absolute;
  top: 150px;
  width: 80%;
  left: 10%;
  height: fit-content;
  background-color: rgba(199, 194, 186, 0.9);
  border: 0px solid red;
  border-radius: 5%;
}
</style>
<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: ShouXie;
}
.doctor {
  overflow-y: scroll;
}
/* div{
  border: 2px solid red;
} */
.center {
  width: 100%;
  margin: 0 auto;
}
.top_time,
.bottom {
  flex-grow: 1;
  height: 45px;
  display: flex;
  flex-direction: row;
}
.task_content {
  flex-grow: 18;
  height: 72vh;
  /* overflow-y: scroll; */
}
.look_me,
.look_ta {
  flex-grow: 1;
  margin: auto 0;
  height: 72%;
}
.choose_time {
  flex-grow: 1.2;
  margin: auto 0;
}
.look_me .top_bt,
.look_ta .top_bt {
  width: 75%;
  margin: auto 0;
  height: 100%;
  border: 3px solid rgba(72, 139, 170, 1);
  border-radius: 23%;
  font-size: 18px;
  font-family: ShouXie;
  color: rgba(8, 9, 10, 0.88);
}

.choose_time .top_bt {
  /* max-width: fit-content; */
  margin: auto 0;
  height: 100%;
}
</style>